<template>
    <div class="qiuzhi">
      
     <div class="banner2">
      
      <div class="btn"><button @click="exper">经验</button><button @click="baike">百科</button></div>  <img class="img2" src="../../public/imagescx/lingdang.png" alt="" @click="$router.push('/alertpop')">
      <img class="img1" src="../../public/imagescx/touxiang.png" alt="" @click="$router.push('/homepage')"> 
     </div> 
   
<div class="search"><input type="text" @click="$router.push('/search')" placeholder="......"></div>
     
    
  <div class="ipt"></div>
   
      <ul class=banner>
        <li @click="tiao1"><span class="iconfont icon-tiku1"></span> <span>找公司</span></li>
        <li @click="tiao2"> <span class="iconfont icon-rili"></span> <span>今日热榜</span> </li>
        <li @click="tiao3"> <span class="iconfont icon-mianshitiku "></span><span>面试题</span> </li>
        <li @click="tiao4"><span class="iconfont icon-shequ "></span><span>直说树洞</span></li>
        <li @click="tiao5"><span class="iconfont icon-xueshimao"></span><span>学生圈</span></li>
        <li @click="tiao6"><span class="iconfont icon-record-video"></span><span>直播招聘</span></li>
      </ul>
     
    </div>
  </template>
  
  <script>
  export default {
    methods:{
      exper(){
  this.$router.push('/exper')
    },
    baike(){
    this.$router.push('/baike')
    },
      tiao1(){
        this.$router.push('/employ')
      },
      tiao2(){
        this.$router.push('/hotlist')
      },
      tiao3(){
        this.$router.push('/miantest')
      },
      tiao4(){
        this.$router.push( '/treepool')
      },
      tiao5(){
        this.$router.push( '/studentcircle')
      },
      tiao6(){
        this.$router.push( '/liveemploy')
      }
      
  
    }
  
  }
  </script>
  
  <style lang="scss" scoped>
  .banner{
    width: 100%;
    margin-left:.2rem;
    width: 3.3rem;
    height: .65rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: scroll;
    transform-origin: left top;
   
    li{width: .4rem;
      text-align: center;
      flex-shrink: 0;
      height: 100%;
      transform: scale(.85);
      transform-origin: left top;
      margin-left:.2rem;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      
    }
  }
  .banner2{
    width: 100%;
    height: .35rem;
    background-color: #64bfba;
    display: flex;
    justify-content: center;
    align-items: center;
.img2{
  width: .27rem;
  height: .21rem;
  position:absolute;
  right: .1rem;
  top: .1rem;
}
.img1{
  width: .27rem;
  height: .21rem;
  position: absolute;
 left: .1rem;
  top: .1rem;
}
   
    .btn{
      display: flex;
    justify-content: space-evenly;
    border-radius: .15rem;
      width: 1rem;
      height:.3rem;
      background-color: #4fa5a1;
      button{
        width: .42rem;
        height: .27rem;
        transform: scale(.8);
        background-color: white;
        border-radius: .15rem;
        border:none;
        color: #64bfba
      };
      
    }
  }
  .btn button:last-child{
    color: white;
    background-color:transparent
  }
  .iconfont{
    font-size:.3rem;
    color: #299a96;
    font-weight:700

  }
  .search{
    height: .54rem;
    width: 100%;
    background-color: #64bfba57;
  //  display: flex;  
  position: absolute; 
  background: linear-gradient(to bottom,#64bfba 0%,#64bfba1b 100%);
  

  }
input{
  position: relative;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: .1rem;
}
.ipt{
  width: 100%;
  height: .54rem;
}

  
  </style>